<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon"
          href="${pageContext.servletContext.contextPath}/images/milogo.png" />
    <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/st/front/CSS/mycart.css">
    <title>我的购物车</title>
</head>

<body>

<div id="header-wrap">
    <div id="header">
        <div id="logo">
            <div>
                <a href="${pageContext.servletContext.contextPath}/index"><img src="https://s02.mifile.cn/assets/static/image/mi-home.png"
                                          class="logo"></a>
                <a href="${pageContext.servletContext.contextPath}/index"><img src="https://s02.mifile.cn/assets/static/image/mi-logo.png"
                                          class="logo"></a>
            </div>
        </div>
        <p>我的购物车</p>
        <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
        <p>欢迎您：<span id="account">${name}</span></p>
        <div id="quit">
            <a href="${pageContext.servletContext.contextPath}/Front_out">退出</a>
        </div>
    </div>
</div>
<form action="${pageContext.servletContext.contextPath}/CreateOrder" method="post">
<div id="main">
        <div id="main-header">
            <input type="checkbox" id="selAll" checked="checked">
            <p>全选</p>
            <p>商品名称</p>
            <p>单价(元)</p>
            <p>数量</p>
            <p>小计(元)</p>
            <p>操作</p>
        </div>
        <c:forEach items="${getShoppCart}" var="List">
            <div class="main-products">
                <input type="checkbox" class="selSingle" checked="checked" name="carid" value="${List.scid}">
                <img src="${pageContext.servletContext.contextPath}/images/${List.picture}">
                <p class="pro-name">${List.comname}<span id="deid" style="display: none">${List.deid}</span></p>
                <p class="pro-price">${List.depraice}</p>
                <div class="pro-num-box">
                    <input type="button" class="subBtn" value="减" data-id="${v.pid}" data-price="${v.pprice}">
                    <p class="pro-num">${List.count}</p>
                    <input type="button" class="addBtn" value="加" data-id="${v.pid}" data-price="${v.pprice}">
                </div>
                <p class="pro-num-count">${List.depraice*List.count}</p>
                <p class="pro-op" data-id="${v.pid}">删除</p>
                <input type="hidden" name="jiage" value="0">
            </div>
        </c:forEach>
</div>
<div id="All-price-bar">
    <a href="${pageContext.servletContext.contextPath}/index">继续购物</a>
    <span>竞争不是你死我活,而是重视用户的体验,用户是根本,我们要用心做产品,把心思放在产品和用户上!</span>
    <span>当前商品一共&ensp;<i id="All-price"></i>&ensp;元</span>
    <div id="submit">去结算</div>
</div>
</form>
<script src="${pageContext.servletContext.contextPath}/st/front/JS/jquery-3.2.1.min.js"></script>
<script>
    $(function (){
        $("#submit").click(function (){
            $("[name=jiage]").val($("#All-price").html());
            //alert($("[name=jiage]").val())
            $("form").submit();
        })
    })
    /* --------------------------------运行对购物车操作的方法---------------------------------- */
    function loadCart() {
        delCart();
        subCart();
        addCart();
        selAll();
        selSingle();
        loadAllNum();
    }
    loadCart();
    function delCart() {
        $('.pro-op').click(function () {
            let res = confirm('您确定要删除吗?');
            if (res) {
                $(this).parent().remove();
                $.ajax({
                    type: 'get',
                    url: '${pageContext.servletContext.contextPath}/delCart',
                    data: {
                        deid: $(this).parent().find("span").eq(0).html(),
                    },
                    success: function (result) {
                            if ($('.selSingle').length == $('.selSingle:checked').length) {
                                $('#selAll').prop('checked', true);
                            } else {
                                $('#selAll').prop('checked', false);
                            }
                            loadAllNum();
                    }
                });
            }
        })
    }
    /* ---------------------------------------购物车中减少商品---------------------------*/
    function subCart() {
        $('.subBtn').click(function () {
            let nowNum = parseInt($(this).next().html());
            if (nowNum == 1) {
                return;
            }
            //修改数量
            $(this).next().html($(this).next().html() - 1);
            //单价
            var a=$(this).parent().parent().children().eq(3).html();
            //数量
            var b=$(this).next().html();
            //alert(b);
            $.ajax({
                type: 'get',
                url: '${pageContext.servletContext.contextPath}/ReduceCart',
                data: {
                    deid: $(this).parent().parent().find("span").eq(0).html()
                },
                success: (result) =>{
                        $(this).parent().parent().find(".pro-num-count").html(a*(b));
                        loadAllNum();
                },
                error: (err) => {
                    console.log('服务器繁忙');
                }
            })
        })
    }
    /* ------------------------------购物车中添加商品-------------------------------- */
    function addCart() {
        $('.addBtn').click(function () {
            let nowNum = parseInt($(this).prev().html());
            //修改数量
             var ha=$(this).parent().parent().find(".pro-num").html(parseInt(nowNum+1));
           // alert(ha);
            //单价
            var a=$(this).parent().parent().children().eq(3).html();
            //alert(a*ha);
            //数量
            var b=$(this).parent().parent().find(".pro-num").html();
            $.ajax({
                type: 'get',
                url: '${pageContext.servletContext.contextPath}/AddCartCount',
                data: {
                    deid:$(this).parent().parent().find("span").eq(0).html()
                },
                success: (res) => {
                    $(this).parent().parent().find(".pro-num-count").html(a*b);
                    loadAllNum();
                },
                error: (err) => {
                    console.log('服务器繁忙');
                }
            })
        })
    }
    /* ----------------------------------全选和单选------------------------------------ */
    function selAll() {
        $('#selAll').change(function () {
            $('.selSingle').prop('checked', this.checked);
            loadAllNum();
        })
    }
    function selSingle() {
        $('.selSingle').change(function () {
            if ($('.selSingle').length == $('.selSingle:checked').length) {
                $('#selAll').prop('checked', true);
            } else {
                $('#selAll').prop('checked', false);
            }
            loadAllNum();
        })
    }
    /* -----------------------------------购物车总价-------------------------------------*/
    function loadAllNum() {
        let count = 0;
        $('.selSingle:checked').each(function (i, v) {
            count += parseFloat($(v).parent().children().eq(5).html());
        })
        $('#All-price').html(count);
    }
    /* ----------------------------用户注销 -------------------------------*/
    function quit() {
        $('#account').click(function () {
            if (parseInt($('#quit').css('height')) == 30) {
                $('#quit').animate({
                    height: 0
                })
            } else {
                $('#quit').animate({
                    height: 30
                }, 300)
            }
        })
    }
    quit();
</script>
</body>

</html>
